<template>
  <div class="container">
    <el-card style="margin: 15px 10px 0">
      <template #header v-if="subject.id && subject.name">
        <el-breadcrumb>
          <el-breadcrumb-item>学科管理</el-breadcrumb-item>
          <el-breadcrumb>{{ subject.name }}</el-breadcrumb>
          <el-breadcrumb-item>目录管理</el-breadcrumb-item>
        </el-breadcrumb>
      </template>
      <el-row>
        <el-col :span="18">
          <el-form label-width="80px" size="small" :inline="true">
            <el-form-item label="目录名称">
              <el-input v-model="form.tagsName" style="200px"></el-input>
            </el-form-item>
            <el-form-item label="状态">
              <el-select v-model="form.state">
                <el-option :value="1" label="启用"></el-option>
                <el-option :value="0" label="禁用"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item style="text-align: right">
              <el-button @click="clear">清除</el-button>
              <el-button type="primary" @click="search">搜索</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6" style="text-align: right">
          <el-button
            v-if="subject.id && subject.name"
            type="text"
            icon="el-icon-back"
            @click="$router.back()"
            >返回学科</el-button
          >
          <el-button
            @click="show()"
            icon="el-icon-edit"
            type="success"
            size="small"
            >新增目录</el-button
          >
        </el-col>
      </el-row>
      <el-alert
        :title="`数据一共${total}条`"
        style="margin-bottom: 15px"
        type="info"
        class="alert"
        :closable="false"
        show-icon
      ></el-alert>
      <el-table :data="tagsList">
        <el-table-column
          width="80px"
          label="序号"
          type="index"
          :index="indexMethod"
        ></el-table-column>
        <el-table-column label="所属学科" prop="subjectName"></el-table-column>
        <el-table-column label="标签名称" prop="tagName"></el-table-column>
        <el-table-column label="创建者" prop="username"></el-table-column>
        <el-table-column label="创建日期" prop="addDate">
          <template #default="{ row }">
            {{ row.addDate | parseTimeByString }}
          </template>
        </el-table-column>
        <el-table-column label="状态" prop="state">
          <template #default="{ row }">
            {{ row.state === 1 ? '已启用' : '已禁用' }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button @click="toggleState(row)" type="text" size="small">{{
              row.state === 1 ? '禁用' : '启用'
            }}</el-button>
            <el-button
              @click="show(row)"
              :disabled="row.state === 1"
              type="text"
              size="small"
              >修改</el-button
            >
            <el-button
              :disabled="row.state === 1 || row.totals > 0"
              type="text"
              size="small"
              @click="del(row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="margin-top: 20px; text-align: right"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="form.page"
        :page-sizes="[1, 3, 5, 7, 10]"
        :page-size="form.pagesize"
        :total="total"
        layout=" sizes, prev, pager,
        next, jumper"
        hide-on-single-page
      >
      </el-pagination>
    </el-card>
    <TagsAdd
      :data="currentTag"
      :showDialog.sync="showDialog"
      @updateTags="getTagsLists"
    ></TagsAdd>
  </div>
</template>

<script>
import { status } from '@/api/hmmm/constants.js'
import { list, remove, changeState } from '@/api/hmmm/tags.js'
import TagsAdd from '../components/tags-add.vue'
export default {
  components: {
    TagsAdd
  },
  name: 'Tags',
  data () {
    return {
      status,
      form: {
        tagName: null,
        state: null,
        page: 1,
        pagesize: 5
      },
      total: 0,
      tagsList: [],
      showDialog: false,
      currentTag: {}
    }
  },
  created () {
    this.getTagsLists()
  },
  methods: {
    show (tag = {}) {
      console.log(tag)
      this.showDialog = true
      this.currentTag = tag
    },
    clear () {
      this.form = {
        tagName: null,
        state: null,
        page: 1,
        pagesize: 5
      }
    },
    async toggleState (tag) {
      const res = await changeState({ id: tag.id, state: tag.state === 1 ? 0 : 1 })
      console.log(res)
      this.$message.success('操作成功')
      tag.state = tag.state === 1 ? 0 : 1
    },
    search () {
      this.form.page = 1
      this.getTagsLists()
    },
    indexMethod (index) {
      return index + 1 + this.form.pagesize * (this.form.page - 1)
    },
    handleSizeChange (val) {
      this.form.page = 1
      this.form.pagesize = val
      this.getTagsLists()
    },
    handleCurrentChange (val) {
      this.form.page = val
      this.getTagsLists()
    },
    async getTagsLists () {
      const { data: { counts, items } } = await list(this.form)
      // console.log(items)
      this.tagsList = items
      this.total = counts
    },
    del (data) {
      this.$confirm('确认删除?', '温馨提示').then(async () => {
        const res = await remove(data)
        console.log(res)
        this.$message.success('删除成功')
        if (this.tagsList.length === 1 && this.form.page > 1) {
          this.form.page--
        }
        this.getTagsLists()
      }).catch(() => {
        this.$message.error('取消操作')
      })
    }

  },
  computed: {
    subject () {
      return this.$route.query || {}
    }
  }
}
</script>

<style scoped lang='less'></style>
